<!doctype html>
<html lang="en">

<head>
    <title>Title</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <!-- bootstrap 4.x is supported. You can also use the bootstrap css 3.3.x versions -->
    <link rel="stylesheet" href="./font-awesome/css/fontawesome.min.css">
    <link rel="stylesheet" href="./bootstrap/dist/css/bootstrap.min.css">
    <link href="./bootstrap-fileinput/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
    <!-- if using RTL (Right-To-Left) orientation, load the RTL CSS file after fileinput.css by uncommenting below -->
    <!-- link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.1/css/fileinput-rtl.min.css" media="all" rel="stylesheet" type="text/css" /-->
    <script src="./jquery/dist/jquery.min.js"></script>
    <!-- piexif.min.js is needed for auto orienting image files OR when restoring exif data in resized images and when you 
    wish to resize images before upload. This must be loaded before fileinput.min.js -->
    <script src="./bootstrap-fileinput/js//plugins/piexif.js" type="text/javascript"></script>
    <!-- sortable.min.js is only needed if you wish to sort / rearrange files in initial preview. 
    This must be loaded before fileinput.min.js -->
    <script src="./bootstrap-fileinput/js/plugins/sortable.min.js" type="text/javascript"></script>
    <!-- purify.min.js is only needed if you wish to purify HTML content in your preview for 
    HTML files. This must be loaded before fileinput.min.js -->
    <script src="./bootstrap-fileinput/js/plugins/purify.min.js" type="text/javascript"></script>
    <!-- popper.min.js below is needed if you use bootstrap 4.x. You can also use the bootstrap js 
   3.3.x versions without popper.min.js. -->
    <script src="./popper.js/dist/umd/popper.min.js"></script>
    <!-- bootstrap.min.js below is needed if you wish to zoom and preview file content in a detail modal
    dialog. bootstrap 4.x is supported. You can also use the bootstrap js 3.3.x versions. -->
    <script src="./bootstrap/dist/js/bootstrap.min.js" type="text/javascript"></script>
    <!-- the main fileinput plugin file -->
    <script src="./bootstrap-fileinput/js/fileinput.js"></script>
    <!-- optionally if you need a theme like font awesome theme you can include it as mentioned below -->
    <script src="./bootstrap-fileinput/themes/fa/theme.min.js"></script>
    <!-- optionally if you need translation for your language then include  locale file as mentioned below -->
     <script src="./bootstrap-fileinput/js/locales/zh.js"></script>
</head>

<body>


    <div class="container">


        <div class="file-loading">
            <input id="uploadFile" name="file" type="file" multiple>
        </div>

        <!--<input type="file" class="file" name="file" data-browse-on-zone-click="true"-->
               <!--id="uploadFile" multiple="multiple"-->
            <!--data-show-preview="true" data-show-upload="false"-->
               <!--data-show-caption="true"-->
            <!--data-msg-placeholder="Select {files} for upload...">-->


        <form action="">
            <div class="form-group">
                <label for=""></label>
                <input type="text" name="" id="" class="form-control" placeholder="" aria-describedby="helpId">
                <small id="helpId" class="text-muted">Help text</small>
            </div>

            <div class="form-group">
                <label for=""></label>

                <small id="fileHelpId" class="form-text text-muted">Help text</small>
            </div>

            <button type="button" class="btn btn-primary">Submit</button>
        </form>


        <div class="card-columns">
            <div class="card">
                <img class="card-img-top" src="bg.jpg" alt="Card image">
                <div class="card-body">
                    <h4 class="card-title">John Doe</h4>
                    <p class="card-text">Some example text.</p>
                    <a href="#" class="btn btn-primary">See Profile</a>
                </div>
            </div>
            <div class="card p-3">
                <img class="card-img-top" src="mm.jpg" alt="Card image">
                <div class="card-body">
                    <h4 class="card-title">John Doe</h4>
                    <p class="card-text">Some example text.</p>
                    <a href="#" class="btn btn-primary">See Profile</a>
                </div>
            </div>



            <div class="card">

                <img class="card-img-top" src="mm.jpg" alt="Card image">
                <div class="card-body">

                    <h4 class="card-title">Card title</h4>
                    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to
                        additional content. This card has even longer content than the first to show that equal height
                        action.</p>
                    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                </div>
            </div>
        </div>



    </div>


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->

</body>

</html>


<script>

    var url = 'file-items/upload';
//    $("#uploadFile").fileinput();
//    $("#uploadFile").fileinput({
//        'showUpload': false, 'previewFileType': 'any',
//        uploadUrl: url, // server upload action
////        uploadExtraData: { playlist: $("#playlist").val() },
////        allowedFileTypes: ['audio'],
//        uploadAsync: true,
//        showBrowse: true,
//        browseOnZoneClick: true
//    });



    function initFileInput() {

        var control = $('#uploadFile');
        //初始化上传控件的样式
        control.fileinput({
            language: 'zh', //设置语言
            uploadUrl: url, //上传的地址
//            allowedFileExtensions: ['xls', 'xlsx'],//接收的文件后缀
            uploadAsync: true, //默认异步上传
            showUpload: false, //是否显示上传按钮
            showRemove: false, //显示移除按钮
            showPreview: true, //是否显示预览
            showCaption: false,//是否显示标题
            browseClass: "btn btn-primary", //按钮样式
            //dropZoneEnabled: false,//是否显示拖拽区域
            //minImageWidth: 50, //图片的最小宽度
            //minImageHeight: 50,//图片的最小高度
            //maxImageWidth: 1000,//图片的最大宽度
            //maxImageHeight: 1000,//图片的最大高度
            //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
            //minFileCount: 0,
//            maxFileCount: 1, //表示允许同时上传的最大文件个数
            enctype: 'multipart/form-data',
            validateInitialCount: true,
            previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
            msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
            uploadExtraData: function (previewId, index) {   //额外参数的关键点
                return {

                    scode: 'card'
                }

            }
        }).on('filebatchselected', function (event, files) {//选中文件事件

            $(this).fileinput("upload");

        }).on("fileuploaded", function (event, d, previewId, index) {
            var data = d.response.message;
            var state = d.response.state;

            alert(1);


        })

    };




    initFileInput();



</script>